/**
 * 新建目录、修改目录
 */
import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, message, Spin } from 'antd';
import request from '@/utils/request';

const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

function CreateCatalog({ visiable, close, title, passdata, form, callback }) {
  const { getFieldDecorator } = form;
  const [loading, setLoading] = useState(false);

  const onSubmit = () => {
    form.validateFields((err, value) => {
      if (err) return;
      if (title === 'add') {
        setLoading(true);
        request('pmc/pms/PmPackageCatalogController/add', {
          data: { ...value, parentId: value.parentId ? passdata.id : '' },
        })
          .then(res => {
            if (res.success) {
              message.success('目录新增成功！');
              callback(res.success);
              close();
            } else {
              message.error('目录新增失败！');
            }
          })
          .always(() => setLoading(false));
      } else if (title === 'edit') {
        setLoading(true);
        request('pmc/pms/PmPackageCatalogController/update', {
          data: {
            ...value,
            parentId: value.parentId ? passdata.parentId : '',
            catalogId: passdata.id,
          },
        })
          .then(res => {
            if (res.success) {
              message.success('目录修改成功！');
              callback(res.success);
              close();
            } else {
              message.error('目录修改失败！');
            }
          })
          .always(() => setLoading(false));
      }
    });
  };

  return (
    <Modal
      title={title === 'add' ? '新建目录' : '修改目录'}
      width="500px"
      destroyOnClose
      onOk={onSubmit}
      onCancel={close}
      visible={visiable}
    >
      <Spin spinning={loading}>
        <Form>
          <Form.Item label="目录名称" {...formItemLayout}>
            {getFieldDecorator('catalogName', {
              initialValue: passdata && title === 'edit' ? passdata.name : '',
              rules: [
                {
                  required: true,
                  message: '目录名称不能为空',
                },
              ],
            })(<Input placeholder="请输入" />)}
          </Form.Item>
          <Form.Item label="父目录" {...formItemLayout}>
            {getFieldDecorator('parentId', {
              /* eslint-disable */
              initialValue: passdata ? (title === 'edit' ? passdata.pname : passdata.name) : '',
              /* eslint-enable */
            })(<Input placeholder="注:若为顶层目录可不填" disabled />)}
          </Form.Item>
          <Form.Item label="目录描述" {...formItemLayout}>
            {getFieldDecorator('remark', {
              initialValue: passdata && title === 'edit' ? passdata.remark : '',
            })(<TextArea rows={3} placeholder="请输入描述内容" />)}
          </Form.Item>
        </Form>
      </Spin>
    </Modal>
  );
}

export default Form.create({
  mapPropsToFields(props) {
    // if (props.passdata && props.passdata.pname) {
    //   return {
    //     parentId: Form.createFormField({ value: props.passdata.pname }),
    //   };
    // }
  },
})(CreateCatalog);
